function LeaderboardTabs({ activeTab, onTabChange }) {
    const [showTooltip, setShowTooltip] = React.useState(false);
    const [timeUntilReset, setTimeUntilReset] = React.useState('');
    const tooltipTimeoutRef = React.useRef(null);
    const intervalRef = React.useRef(null);

    React.useEffect(() => {
        const updateTimeUntilReset = () => {
            try {
                const now = new Date();
                const tomorrow = new Date();
                tomorrow.setUTCHours(24, 0, 0, 0);
                const diff = tomorrow - now;

                const hours = Math.floor(diff / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);

                setTimeUntilReset(
                    `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
                );
            } catch (error) {
                reportError(error);
            }
        };

        // Initial update
        updateTimeUntilReset();

        // Update every second
        intervalRef.current = setInterval(updateTimeUntilReset, 1000);

        return () => {
            if (intervalRef.current) {
                clearInterval(intervalRef.current);
            }
        };
    }, []);

    React.useEffect(() => {
        return () => {
            if (tooltipTimeoutRef.current) {
                clearTimeout(tooltipTimeoutRef.current);
            }
        };
    }, []);

    const handleInfoMouseEnter = (e) => {
        e.stopPropagation(); // Prevent tab hover effect
        if (tooltipTimeoutRef.current) {
            clearTimeout(tooltipTimeoutRef.current);
        }
        setShowTooltip(true);
    };

    const handleInfoMouseLeave = (e) => {
        e.stopPropagation(); // Prevent tab hover effect
        if (tooltipTimeoutRef.current) {
            clearTimeout(tooltipTimeoutRef.current);
        }
        tooltipTimeoutRef.current = setTimeout(() => {
            setShowTooltip(false);
        }, 300);
    };

    return (
        <div className="flex border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800" data-name="leaderboard-tabs">
            <button
                onClick={() => onTabChange('daily')}
                className={`flex-1 py-2 px-4 text-sm font-medium flex items-center justify-center gap-1 ${
                    activeTab === 'daily'
                        ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
                        : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
                }`}
                data-name="daily-tab"
            >
                Daily
                <div 
                    className="relative inline-block"
                    onMouseEnter={handleInfoMouseEnter}
                    onMouseLeave={handleInfoMouseLeave}
                    onClick={e => e.stopPropagation()}
                    data-name="daily-info"
                >
                    <svg 
                        xmlns="http://www.w3.org/2000/svg" 
                        className="h-4 w-4 text-current cursor-help"
                        fill="none" 
                        viewBox="0 0 24 24" 
                        stroke="currentColor"
                    >
                        <path 
                            strokeLinecap="round" 
                            strokeLinejoin="round" 
                            strokeWidth={2} 
                            d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" 
                        />
                    </svg>
                    <div 
                        className={`absolute left-1/2 bottom-full mb-2 w-48 -translate-x-1/2 transition-all duration-200 z-30 ${
                            showTooltip 
                                ? 'opacity-100 transform translate-y-0' 
                                : 'opacity-0 transform translate-y-2 pointer-events-none'
                        }`}
                        data-name="daily-tooltip"
                    >
                        <div className="bg-gray-900 text-white p-3 rounded-lg text-xs shadow-lg relative">
                            <div className="flex flex-col gap-2">
                                <p>Daily leaderboard resets at UTC 00:00</p>
                                <div className="flex items-center justify-center gap-1 text-yellow-400 font-mono">
                                    <svg 
                                        xmlns="http://www.w3.org/2000/svg" 
                                        className="h-4 w-4" 
                                        fill="none" 
                                        viewBox="0 0 24 24" 
                                        stroke="currentColor"
                                    >
                                        <path 
                                            strokeLinecap="round" 
                                            strokeLinejoin="round" 
                                            strokeWidth={2} 
                                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" 
                                        />
                                    </svg>
                                    {timeUntilReset}
                                </div>
                            </div>
                            <div className="absolute -bottom-1 left-1/2 w-2 h-2 bg-gray-900 transform -translate-x-1/2 rotate-45"></div>
                        </div>
                    </div>
                </div>
            </button>
            <button
                onClick={() => onTabChange('historical')}
                className={`flex-1 py-2 px-4 text-sm font-medium ${
                    activeTab === 'historical'
                        ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
                        : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
                }`}
                data-name="historical-tab"
            >
                All Time
            </button>
        </div>
    );
}
